<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-form ref="form" :inline="false" :model="form" label-width="80px">
            <el-card :body-style="{ padding: '20px' }" shadow="never">
                <div slot="header">
                    生成二维码
                </div>
                <el-form-item v-if="id" label="生成二维码">
                    <el-image
                        :src="url"
                        fit="fit"
                        style="width: 150px; height: 150px">
                    </el-image>
                    <el-button class="block" size="mini" type="danger" @click="generateQr">生成</el-button>
                </el-form-item>

                <el-form-item label="名称">
                    <el-input v-model="form.name" disabled placeholder="名称"></el-input>
                    <hd-error name="name"/>
                </el-form-item>
                <el-form-item label="类别">
                    <el-radio v-model="form.type" disabled label="normal">普通券</el-radio>
                    <el-radio v-model="form.type" disabled label="exchangeable">可兑换券</el-radio>
                    <hd-error name="type"/>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.status" disabled>
                        <el-radio :label="0">待激活</el-radio>
                        <el-radio :label="1">待使用</el-radio>
                        <el-radio :label="2">已使用</el-radio>
                        <el-radio :label="3">已兑换</el-radio>
                    </el-radio-group>
                    <hd-error name="status"/>
                </el-form-item>
                <el-form-item label="金额">
                    <el-input-number v-model="form.amount" :min="0" :step="100" disabled size="mini"
                                     step-strictly></el-input-number>
                    <hd-error name="amount"/>
                </el-form-item>
                <el-form-item label="到期时间">
                    <el-date-picker
                        v-model="form.overtime"
                        disabled
                        placeholder="选择日期时间"
                        type="datetime"
                        value-format="yyyy-MM-dd HH-mm-ss">
                    </el-date-picker>
                    <hd-error name="overtime"/>
                </el-form-item>

                <el-form-item label="描述">
                    <el-input v-model="form.description" disabled placeholder="描述" rows="6" type="textarea"></el-input>
                </el-form-item>
            </el-card>
        </el-form>

    </div>
</template>

<script>
import tabs from './tabs'

const form = {
    user_id: '', user_name: '', amount: '', type: '', description: '', name: ''
}
export default {
    route: {path: 'voucher/:id/qr'},
    data() {
        return {
            tabs,
            form,
            url: '',
            id: this.$route.params.id
        }
    },
    async created() {
        this.form = await this.axios.get(`admin/voucher/${this.id}`)
    },
    methods: {
        async generateQr() {
            this.url = await this.axios.post(`mini/trade/voucher/${this.id}/showQr`)
        }
    }
}
</script>

<style>

</style>
